<template>
  <div :class="$style.flowCustomer">
    <p :class="$style.item">{{ flow.officeName ? `【${flow.officeName}】` : '--' }}</p>
    <p :class="$style.item">{{ flow.accountType ? `【${flow.accountType}】` : '--' }}</p>
    <p :class="$style.item">{{ flow.name || '--' }}</p>
    <p :class="$style.item">{{ flow.tel || '--' }}</p>
  </div>
</template>
<script>
export default {
  name: 'FlowCustomer',
  props: {
    flow: {
      type: [Array, Object],
      default: () => []
    },
    prefix: {
      type: String,
      default: ''
    }
  },
  computed: {
    computedWidth() {
      if (this.flow instanceof Array) {
        return `0 0 ${100 / this.flow.length}%`
      } else {
        return `0 0 ${100 / Object.keys(this.flow).length}%`
      }
    }
  }
}
</script>
<style lang='scss' module>
@import "@/styles/mixin.scss";
.flowCustomer{
    max-width: 100%;
    & .item:not(:last-child){
        // padding-right: 10px;
    }
    & p{
        display: inline-block;
        // width: 20%;
        padding-bottom: 10px;
        margin: 0;
        flex: 0 0 auto;
        vertical-align: text-top;
    }
}
</style>
